import React from 'react'
import ReactEcharts from 'echarts-for-react'

class ChartShowLoadingComponent extends React.Component {
  constructor() {
    super()
    this._t = null
    this.onChartReady = this.onChartReady.bind(this)
  }
  componentWillUnmount() {
    clearTimeout(this._t)
  }

  onChartReady(chart) {
    this._t = setTimeout(() => {
      chart.hideLoading()
    }, 3000)
  }

  render() {
    const getOtion = () => {
      const option = {
        title: {
          text: '基础雷达图',
        },
        tooltip: {},
        legend: {
          data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'],
        },
        radar: {
          indicator: [
            { name: '销售（sales）', max: 6500 },
            { name: '管理（Administration）', max: 16000 },
            { name: '信息技术（Information Techology）', max: 30000 },
            { name: '客服（Customer Support）', max: 38000 },
            { name: '研发（Development）', max: 52000 },
            { name: '市场（Marketing）', max: 25000 },
          ],
        },
        series: [
          {
            name: '预算 vs 开销（Budget vs spending）',
            type: 'radar',
            data: [
              {
                value: [4300, 10000, 28000, 35000, 50000, 19000],
                name: '预算分配（Allocated Budget）',
              },
              {
                value: [5000, 14000, 28000, 31000, 42000, 21000],
                name: '实际开销（Actual Spending）',
              },
            ],
          },
        ],
      }
      return option
    }
    const getLoadingOption = () => {
      const option = {
        text: '加载中...',
        color: '#4413c2',
        textColor: '#270240',
        maskColor: 'rgba(194, 88, 86, 0.3)',
        zlevel: 0,
      }
      return option
    }

    let code =
      'onChartReady: function(chart) {\n' +
      "  'chart.hideLoading();\n" +
      '}\n\n' +
      '<ReactEcharts \n' +
      '    option={this.getOtion()} \n' +
      '    onChartReady={this.onChartReady} \n' +
      '    loadingOption={this.getLoadingOption()} \n' +
      '    showLoading={true} />'

    return (
      <div className="examples">
        <div className="parent">
          <label>
            {' '}
            Chart loading With <strong> showLoading </strong>: (when chart
            ready, hide the loading mask.)
          </label>
          <ReactEcharts
            option={getOtion()}
            onChartReady={this.onChartReady}
            loadingOption={getLoadingOption()}
            showLoading
          />
          <label> code below: </label>
          <pre>
            <code>{code}</code>
          </pre>
        </div>
      </div>
    )
  }
}

export default ChartShowLoadingComponent
